import React from 'react';
import { Card, Row, Col, Statistic, Empty } from 'antd';
import { CloudServerOutlined, CloudOutlined, LinkOutlined } from '@ant-design/icons';
import { DubboOverviewDTO } from '../../../../services/dubboAnalysis';

interface DubboOverviewCardsProps {
    overview?: DubboOverviewDTO;
    loading: boolean;
}

const DubboOverviewCards: React.FC<DubboOverviewCardsProps> = ({ overview, loading }) => {
    const cardStyle = {
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        transition: 'all 0.3s ease',
    };

    // 无配置状态展示
    if (!loading && overview && !overview.hasConfig) {
        return (
            <div style={{ 
                marginBottom: '24px',
                padding: '40px',
                background: '#fafafa',
                borderRadius: '8px',
                textAlign: 'center'
            }}>
                <Empty
                    description={
                        <span style={{ color: '#999', fontSize: '14px' }}>
                            该单元暂无 Dubbo 服务配置
                        </span>
                    }
                />
            </div>
        );
    }

    return (
        <div style={{ marginBottom: '24px' }}>
            <Row gutter={[16, 16]}>
                {/* 提供服务数量 - 绿色 */}
                <Col xs={24} sm={12} md={8}>
                    <Card style={cardStyle} loading={loading}>
                        <Statistic
                            title="提供的服务数量"
                            value={overview?.providerCount || 0}
                            prefix={<CloudServerOutlined style={{ color: '#52c41a' }} />}
                            valueStyle={{ color: '#52c41a', fontWeight: 600 }}
                        />
                        <div style={{ fontSize: '12px', color: '#999', marginTop: '8px' }}>
                            对外暴露的 Dubbo 服务接口
                        </div>
                    </Card>
                </Col>

                {/* 消费服务数量 - 蓝色 */}
                <Col xs={24} sm={12} md={8}>
                    <Card style={cardStyle} loading={loading}>
                        <Statistic
                            title="消费的服务数量"
                            value={overview?.consumerCount || 0}
                            prefix={<CloudOutlined style={{ color: '#1890ff' }} />}
                            valueStyle={{ color: '#1890ff', fontWeight: 600 }}
                        />
                        <div style={{ fontSize: '12px', color: '#999', marginTop: '8px' }}>
                            依赖的外部 Dubbo 服务接口
                        </div>
                    </Card>
                </Col>

                {/* 被引用总次数 - 橙色 */}
                <Col xs={24} sm={12} md={8}>
                    <Card style={cardStyle} loading={loading}>
                        <Statistic
                            title="被引用总次数"
                            value={overview?.totalReferences || 0}
                            prefix={<LinkOutlined style={{ color: '#fa8c16' }} />}
                            valueStyle={{ color: '#fa8c16', fontWeight: 600 }}
                        />
                        <div style={{ fontSize: '12px', color: '#999', marginTop: '8px' }}>
                            提供的服务被其他单元引用的总次数
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default DubboOverviewCards;
